import React, { useEffect, useState } from 'react'
import request from '../../api/request'
import { Tabs } from 'antd';
function Index() {
  const [list, setList] = useState([]);

  const getList = async () => {
    const res = await request.get('/api/userlist');
    console.log(res);
    setList(res.data);

  }
  useEffect(() => {
    getList();
  }, [])
  const onChange = (key: string) => {
    console.log(key);
  };
  return (
    <div>

      <Tabs>
        {list.map((item, index) => (
          <Tabs.TabPane tab={item.label} key={index}>
            {item.children.map((it, i) => (
              <p key={i}>
                <span>{i < 10 ? i + 1 : ""}</span>
                {it.word}
              </p>
            ))}
          </Tabs.TabPane>
        ))}
      </Tabs>


      {/* <Tabs >

        {list.length > 0 && list.map((item, index) => (
          <Tabs.TabPane tab={item.label} key={index}>
            {item.children.map((it, i) => (
              <p key={i}>
                <span>{i < 3 ? i + 1 : ""}</span>
                {it.word}
              </p>
            ))}
          </Tabs.TabPane>
          // <span>{item.label}</span>
        ))}
      </Tabs> */}

    </div>
  )
}

export default Index
